<template>
    <div class="order">
        <div class="hand">
            <navSearch @addBtn="addShow" @serach="search"></navSearch>
        </div>
        <div class="table">
            <el-table
            :data="list"
            empty-text="暂无数据"
            :default-sort="{ prop: 'date', order: 'descending' }"
            style="width: 100%"
            >
                <el-table-column prop="date" label="时间" sortable width="180" />
                <el-table-column prop="name" label="管理员" width="120" />
                <el-table-column prop="phone" label="电话" width="180" />
                <el-table-column prop="password" label="密码" width="120" />
                <el-table-column
                prop="authority"
                label="权限"
                width="140"
                :filters="[
                    { text: '只读', value: 0 },
                    { text: '操作员', value: 1 },
                    { text: '管理员', value: 2 },
                ]"
                :filter-method="filterTag"
                filter-placement="bottom-end"
                >
                <template #default="scope">
                    <el-tag
                    :type="scope.row.authority === 2 ? '' : 'success'"
                    disable-transitions
                    >{{ scope.row.authorityname }}</el-tag
                    >
                </template>
                </el-table-column>
                <el-table-column label="操作" width="160">
                    <template #default="scope">
                        <el-button size="small" 
                        @click="handleEdit(scope.$index, scope.row)"
                        >修改</el-button
                        >
                        <el-popconfirm title="确认删除吗" confirm-button-text="删除" cancel-button-text="取消" confirm-button-type="danger">
                            <template #reference>
                                <el-button
                                size="small"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)"
                                >删除</el-button
                                >
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="prev, pager, next" :total="200" />
            </div>
        </div>
        <div class="addFrom">
            <el-dialog v-model="addBtnInt.show" title="订单信息">
                <el-form :model="adminFromInt">
                    <el-form-item label="管理员" :label-width="formLabelWidth">
                        <el-input v-model="adminFromInt.name" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="电话" :label-width="formLabelWidth">
                        <el-input type="number" v-model="adminFromInt.phone" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="密码" :label-width="formLabelWidth">
                        <el-input type="password" v-model="adminFromInt.password" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="权限" :label-width="formLabelWidth">
                        <el-select v-model="authorityList.authority" placeholder="选择权限">
                            <el-option
                            v-for="(item, index) in authorityList"
                            :key="index"
                            :label="item.authorityname"
                            :value="item.authority"
                            :disabled="item.disabled"
                            />
                        </el-select>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="cancel">取消</el-button>
                        <el-button type="primary" @click="addBtnInt.show = false">
                        确认
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs} from "vue";
import navSearch from "@/components/navSearch.vue"
import {adminList, initData} from '../../types/admin';

export default defineComponent({
    components: {
        navSearch
    },
    setup() {
        const data = reactive(new initData)
        // 添加
        const addShow = ()=> {
            data.addBtnInt.show = true
        }
        // 搜索
        const search = (val: any)=> {
            console.log(val)
        }
        // 修改
        const handleEdit = (index: number, row: adminList)=> {
            console.log(index, row)
            data.adminFromInt.name = row.name
            data.adminFromInt.phone = row.phone
            data.adminFromInt.password = row.password
            data.adminFromInt.authority = row.authority
            data.addBtnInt.show = true
        }
        // 取消
        const cancel = ()=> {
            data.addBtnInt.show = false
            Object.keys(data.adminFromInt).forEach((key) => {
                if (typeof (data.adminFromInt[key]) === 'string') {
                data.adminFromInt[key] = '';
                } else if (typeof (data.adminFromInt[key]) === 'number') {
                data.adminFromInt[key] = 0;
                }
            })
        }
        data.authorityList = [
            {authority: 0, authorityname: '只读'},
            {authority: 1, authorityname: '操作员'},
            {authority: 2, authorityname: '管理员'},
        ]
        data.list = [
            {
                date: '2016-05-03',
                name: '张三',
                phone: 13888454621,
                password: 'ymf123456',
                authority: 0,
                authorityname: '只读',
            },
            {
                date: '2016-05-03',
                name: '张三',
                phone: 13888454621,
                password: 'ymf123456',
                authority: 1,
                authorityname: '操作员',
            },
            {
                date: '2016-05-03',
                name: '张三',
                phone: 13888454621,
                password: 'ymf123456',
                authority: 2,
                authorityname: '管理员',
            },
        ]
        console.log(data)
        return {
            ...toRefs(data),
            addShow,
            search,
            handleEdit,
            cancel
        }
    }

})
</script>

<style scoped>
.table {
    padding: 10px 0;
}
.pagination {
    padding: 20px 0;
}
</style>